<template>
  <el-upload class="avatar-uploader" 
    action="" 
     :show-file-list="false"
     :before-upload="beforeAvatarUpload"
    :http-request="uploadImage">
    <!-- 将 http-request 属性绑定到 uploadImage 方法。
     通过这种方式，当组件或指令需要发起 HTTP 请求时，会调用 uploadImage 方法。 -->
    <!-- action是上传地址 手动上传 -->
    <!-- show-file-list不需要展示 -->
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageUrl: ''//初始化数据
    };
  },
  methods: {
    //   检查函数，判断文件的类型还有大小
    beforeAvatarUpload(file) {
      //支持png gif bmp jpeg

      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5;//5m
      // file.size=b


      if (!isJPG) {
        this.$message.error('上传头像图片只能是PNG GIF BMP JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
      // 上传图片
    },
    uploadImage(params) {
      const cosObj = new COS({
        SecretId: 'AKIDznLcdOuAAulNinbASUFkywe6IDuKZZIl',
        SecretKey: 'ECtJTN1QZS7WeaHhqlQovugFdmgLmyvc'
      })//完成cos对象的初始化

      //putObject:
// 这是 cosObj 的一个方法，用于上传对象（如文件、图片等）到云存储。
// 该方法通常接受一个配置对象作为参数。
      cosObj.putObject({
        Bucket: 'new-heima-1340861415',
        Region: 'ap-guangzhou',
        Key: params.file.name,//文件名称
        StorageClass: 'STANDARD',
        Body: params.file  //文件对象
      }, (err, data) => {
        // 有时候又报错，又不知道什么错误，然后又有这个err，就可以打印一下啊 
        console.warn('err',err)
        console.log('test',data);
        //条件检查 data.statusCode 是否等于 200，这通常表示请求成功。同时检查 data.Location 是否存在
        if (data && data.statusCode === 200 && data.Location) {
          this.$emit('input', 'http://' + data.Location);//如果条件为真，使用 this.$emit 方法触发一个事件，事件名称为 'input'。
        //  'http://' + data.Location 将 data.Location 作为 URL 的一部分，构建一个完整的 HTTP 地址。


        } else {
          const errorMessage = err && err.Message ? err.Message : '上传文件时发生未知错误';
          this.$message.error(errorMessage); // 使用保存的 this 引用
          console.log(errorMessage);
          console.log(data);
        }
      });
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
